<template>
    <div class="login">
        <div class="goBackBtn">
            <van-icon name="arrow-left" @click="goBack"/>
        </div>
        <h1>硅谷外卖</h1>
        <van-tabs v-model="active" @change="onClickTab" color="#f18010">
            <van-tab title="短信登录">
                <van-form ref="SMSForm">
                    <van-cell-group>
                        <van-field
                            v-model="SMSform.phone"
                            required
                            label="手机号"
                            placeholder="请输入手机号"
                            :rules="SMSRules.phone"
                            clearable
                        />
                        <van-field
                            v-model="SMSform.code"
                            required
                            label="验证码"
                            placeholder="请输入验证码"
                            :rules="SMSRules.code"
                            clearable
                        >
                            <template #button>
                                <!-- 手机号码输入格式不正确或者定时器未处于关闭状态都是禁用状态 -->
                                <van-button size="mini" type="primary" :disabled="countdown>0 || rightPhone()===false" @click="sendCode">
                                    {{countdown>0? '倒计时'+countdown+'s' : '发送验证码'}}
                                </van-button>
                            </template>
                        </van-field>
                    </van-cell-group>
                    <p class="privacy">
                        温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意&nbsp;&nbsp;
                        <span>《用户服务协议》</span>
                    </p>
                </van-form>
            </van-tab>
            <van-tab title="密码登录">
                <van-form ref="PWDForm">
                    <van-cell-group >
                        <van-field
                            v-model="PWDform.username"
                            required
                            label="账号"
                            placeholder="手机/邮箱/用户名"
                            :rules="PWDRules.username"
                            clearable
                        />
                        <van-field
                            v-model="PWDform.password"
                            required
                            label="密码"
                            placeholder="密码"
                            :rules="PWDRules.password"
                            :type="psdIsShow?'text':'password'"
                            :right-icon="psdIsShow?'eye-o':'closed-eye'"
                            @click-right-icon="psdIsShow=!psdIsShow"
                            clearable
                        />
                        <van-field
                            v-model="PWDform.code"
                            required
                            label="验证码"
                            placeholder="不区分大小写"
                            :rules="PWDRules.captcha"
                            class="codeImg"
                            clearable
                        >
                            <template #button>
                                <img src="http://localhost:4000/captcha" alt="验证码" @click="changeCaptcha"/>
                            </template>
                        </van-field>
                    </van-cell-group>
                </van-form>
            </van-tab>
            <van-button type="warning" @click="Login">登录</van-button>
            <p class="aboutUs">
                <router-link to="/aboutUs">关于我们</router-link>
            </p>
        </van-tabs>
    </div>
</template>

<script>
import { sendCodeApi, LoginSMSApi, LoginPWDApi } from '@/api/Login'
export default {
    name: 'Login',
    data() {
        return {
            active: 0,
            // 短信登录，也是登陆
            SMSform: {
                phone: '13716962779',
                code: '111139'
            },
            SMSRules: { 
                phone: [
                    // { required: true, message: '手机号码不能为空' },
                    { required: true, pattern: /^1[3-9]\d{9}$/, message: '手机号码格式错误！！！' }
                ],
                code: [
                    { required: true, message: '请输入验证码' }
                ]
            },
            // 倒计时
            countdown: 0,

            // 密码登录
            PWDform: {
                username: '',
                password: '',
                captcha: ''
            },
            psdIsShow: false,
            PWDRules: { 
                username: [
                    { required: true, message: '不能为空' }
                ],
                password: [
                    { required: true, message: '请输入密码' }
                ],
                captcha: [
                    { required: true, message: '请输入验证码' }
                ]
            },        
        }
    },
    methods: {
        goBack() {
            this.$router.back()
        },
        onClickTab(val) {
            console.log(val)
        },
        rightPhone() {
            if(!(/^1[3-9]\d{9}$/.test(this.SMSform.phone))){
                return false
            }
            return true
        },
        Login() {
            let form = this.active===0?'SMSForm':'PWDForm'
            
            this.$refs[form].validate().then(async () => {
                if(form==='SMSForm') {
                    const res = await LoginSMSApi(this.SMSform)
                    console.log('短信登录：', res)
                    if(res.status === 200) {
                        if(res.code === 1) {
                            console.log(res.data.msg)
                        } else {
                            let userInfo = res.data.data
                            userInfo.phone = this.SMSform.phone
                            this.$store.commit('SET_USERINFO', userInfo)
                            // console.log(this.$store.state)
                            localStorage.setItem('userInfo', JSON.stringify(userInfo))
                            this.$router.push('/home')
                        }
                    }
                } else {
                    const res = await LoginPWDApi(this.PWDform)
                    console.log('密码登录：', res)
                    if(res.status === 200) {
                        if(res.code === 1) {
                            console.log(res.data.msg)
                        } else {
                            let userInfo = res.data.data
                            userInfo.name = this.PWDform.name
                            this.$store.commit('SET_USERINFO', userInfo)
                            localStorage.setItem('userInfo', JSON.stringify(userInfo))
                            this.$router.push('/home')
                        }
                    }
                }
            }).catch(()=> {
                console.log('验证失败')
            })
        },
        // 发送验证码
        async sendCode() {
            this.countdown = 10
            let timer = setInterval(() => {
                this.countdown--
                if(this.countdown<=0) {
                    clearInterval(timer)
                }
            },1000)
            const res = await sendCodeApi(this.SMSform.phone)
            if(res.status === 200) {
                if(res.data.code === 1) {
                    console.log(res.data.msg)
                }
            }
        },
        // 点击更换验证码图片
        async changeCaptcha(event) {
            event.target.src="http://localhost:4000/captcha?time="+new Date().valueOf()
        }
    }
}
</script>

<style lang="scss" scoped>
.login {
    max-width: 400px;
    padding: 0 0 40px;
    margin: auto;
    // background-color: pink;

    .goBackBtn {
        line-height: 32px;
        padding: 0 10px;
        font-size: 18px;
        color: #888;
    }

    h1 {
        font-size: 32px;
        padding: 20px 0 30px;
        text-align: center;
        font-weight: bolder;
        color: #f18010;
    }

    .van-tabs {
        padding: 0 20px;

        /deep/ .van-tab {
            font-size: 13px;
            font-weight: bold;
        }
        /deep/ .van-tab--active {
            color: #f18010;
        }
        
        /deep/ .van-tabs__content {
            // background-color: green;
            padding: 10px;
        }

        /deep/ .van-button--normal {
            padding: 0 15px;
            width: 100%;
            height: 38px;
            font-size: 16px;
            background-color: #f18010;
            outline: 0;
            margin: 0 0 20px;
        }

        .van-field {
            margin: 30px 0;

            // 发送验证码按钮
            /deep/ .van-field__button {
                margin-top: -5px;
            }
        }
        // 发送验证码图片
        .codeImg {
            line-height: 40px;
            /deep/ .van-field__button {
                margin-top: 0;
            }
            img {
                height: 30px;
            }
        }

        .privacy {
            font-size: 14px;
            color: #999;
            line-height: 20px;
            margin-bottom: 30px;

            span {
                color: #f18010;
            }
        }

        .aboutUs {
            font-size: 12px;
            color: #888;
            text-align: center;
        }
    }
    /deep/ .van-tabs--line .van-tabs__wrap {
        height: 32px;
    }
}

@media screen and (min-width: 751px){
    .login {
        margin-top: 50px;
        box-shadow: 0 0 10px 4px #dfdfdf;
    }
}

@media screen and (max-width: 300px){
    /deep/ .van-field__label {
        width: 5em;
    }
}

</style>